<template>
	<view class="mine-container">
		<view class="user-wrap">
			<image class="user-avatar" :src="userInfo.avatar" mode="aspectFit"></image>
			<view class="user-detail">
				<view class="user-name">{{ userInfo.name }}</view>
				<view class="user-post">{{ userInfo.post }}</view>
			</view>
			<view class="binding-wechat">
				<image src="../../static/mine/wechat-blue.png" class="wechat-icon" mode=""></image>
				<text>绑定微信</text>
			</view>
		</view>
		<view class="menu-list">
			<uni-list :border="false" class="list-wrap">
				<uni-list-item :border="false" v-for="menu in menuList" :key="menu.name" :title="menu.name" showArrow :thumb="menu.icon" thumb-size="sm" />
			</uni-list>
		</view>
		<view class="logout-btn">
			退出登录
		</view>
	</view>
</template>

<script>
	import commonUtils from '@/common/util/common.js'
	export default {
		data() {
			return {
				userInfo: {
					name: '印启发',
					post: '员工',
					avatar: require('../../static/member/avatar.png')
				},
				menuList: [{
						name: '个人信息',
						icon: require('../../static/mine/user-info.png'),
						path: ''
					},
					{
						name: '服务充值',
						icon: require('../../static/mine/recharge.png'),
						path: ''
					},
					{
						name: '切换身份',
						icon: require('../../static/mine/change.png'),
						path: ''
					},
					{
						name: '离职申请',
						icon: require('../../static/mine/form.png'),
						path: ''
					},
					{
						name: '修改密码',
						icon: require('../../static/mine/password.png'),
						path: ''
					},
					{
						name: '联系客服',
						icon: require('../../static/mine/customer-service.png'),
						path: ''
					}
				]
			};
		},
		onLoad() {
			commonUtils.loadFont()
		},
		methods: {}
	};
</script>

<style scoped lang="scss">
	.mine-container {
		font-family: 'PingFangSc';
		font-weight: 400;

		.user-wrap {
			height: 391upx;
			background: url('../../static/workbench/top-bg.png') center 100%;
			background-size: cover;
			display: flex;
			padding: 71upx 32upx 0;

			.user-avatar {
				width: 150upx;
				height: 150upx;
				border: 2upx solid rgb(255, 255, 255);
				border-radius: 16upx;
			}

			.user-detail {
				flex: 1;
				display: flex;
				flex-direction: column;
				margin-left: 32upx;
				height: 150upx;

				.user-name {
					font-size: 34upx;
				}

				.user-post {
					font-size: 28upx;
				}

				.user-name,
				.user-post {
					color: rgb(255, 255, 255);
					flex: 1;
					display: flex;
					align-items: center;
				}
			}

			.binding-wechat {
				padding: 0 20upx;
				background: rgba(255, 255, 255, 0.9);
				border-radius: 8upx;
				color: rgb(7, 111, 255);
				font-size: 30upx;
				height: 77upx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 38upx;

				.wechat-icon {
					width: 36.49upx;
					height: 29.41upx;
					margin-right: 10upx;
				}
			}
		}

		.menu-list {
			margin: -140upx 32upx 0;
			border-radius: 28upx;
			padding: 28upx 36upx;
			background-color: #fff;

			.list-wrap {
				.uni-list-item__content-title {
					font-size: 34upx;
				}

				/deep/ .uni-list-item__icon-img {
					margin-right: 0;
				}
			}
		}

		.logout-btn {
			position: fixed;
			bottom: 52upx;
			background: rgb(247, 249, 250);
			border-radius: 16upx;
			font-size: 32upx;
			width: 650upx;
			height: 102upx;
			margin: 0 50upx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
